<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0 flex-between" @click="$tools.switchTab('/pages/mine/mine')">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="flex-center flex1">
					<view class="chooseItem flex-center margin-right20":class="chooseTabIndex == index?'chooseItem1':''"
					v-for="(item,index) in chooseTabList" :key="index" @click.stop="handleChooseTab(index)">{{item.name}}</view>
				</view>
				<view style="width: 40rpx;"></view>
			</view>
			<view class="margin-30-0">
				<!-- <u-tabs :list="list1" lineColor="#967C5E" @click="handleTabs"></u-tabs> -->
				<view class="flex-flex-warp">
					<view class="flex-justAliCenter-column margin-right30 tabs-item" v-for="(item,index) in list1" :key="index"
					@click="handleTabs(index)">
						<view class="fontSize-15  margin-bottom20"
						:class="status == index?'tabs-item-color':'color-000'">{{item.name}}</view>
						<view class="tabs-item-icon" v-if="status == index"></view>
						<view style="height: 4rpx;" v-else></view>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="bg-fff border-radius20 flex padding-30 margin-bottom30" v-for="(item,index) in list" :key="index"
			@click="goToOrderInfo(item)">
				<image class="img-160 border-radius10 margin-right20" :src="item.goods.image" mode=""></image>
				<!-- 正常商品 -->
				<template v-if="chooseTabIndex == 0">
					<view class="flex1">
						<view class="flex-between margin-bottom10">
							<view class="fontSize-15 color-000 margin-right20">{{item.goods.title}}</view>
							<view class="fontSize-15 color-FE3232" v-if="item.status == 1" style="flex-shrink: 0;">待支付</view>
							<view class="fontSize-15 color-2EA5F5" v-if="item.status == 2" style="flex-shrink: 0;">待发货</view>
							<view class="fontSize-15 color-2EA5F5" v-if="item.status == 3" style="flex-shrink: 0;">待收货</view>
							<view class="fontSize-15 color-4D4D4D" v-if="item.status == 4" style="flex-shrink: 0;">已完成</view>
						</view>
						<view class="fontSize-15 color-999 margin-bottom10" v-if="item.order_type == 1">{{item.item_name?item.item_name:''}}</view>
						<view class="fontSize-15 color-999 margin-bottom10" v-else>{{item.cart[0].item_name?item.cart[0].item_name:''}}</view>
						<view class="flex-between">
							<view style="color: #C90F0F;">
								<text class="fontSize-15">￥</text>
								<text class="fontSize-20" v-if="item.order_type == 1">{{item.goods.price}}</text>
								<text class="fontSize-20" v-else>{{item.cart[0].price}}</text>
							</view>
							<!-- <view>x 1</view> -->
						</view>
					</view>
				</template>
				<!-- 积分商品 -->
				<template v-else>
					<view class="flex1">
						<view class="flex-between margin-bottom10">
							<view class="fontSize-15 color-000 margin-right20">{{item.goods.title}}</view>
							<view class="fontSize-15 color-FE3232" v-if="item.status == 1" style="flex-shrink: 0;">待支付</view>
							<view class="fontSize-15 color-2EA5F5" v-if="item.status == 2" style="flex-shrink: 0;">待发货</view>
							<view class="fontSize-15 color-2EA5F5" v-if="item.status == 3" style="flex-shrink: 0;">待收货</view>
							<view class="fontSize-15 color-4D4D4D" v-if="item.status == 4" style="flex-shrink: 0;">已完成</view>
						</view>
						<view class="fontSize-15 color-999 margin-bottom10" v-if="item.order_type == 1">{{item.item_name?item.item_name:''}}</view>
						<view class="fontSize-15 color-999 margin-bottom10" v-else>{{item.cart[0].item_name?item.cart[0].item_name:''}}</view>
						<view class="flex-between">
							<view style="color: #C90F0F;">
								<text class="fontSize-15">积分:</text>
								<text class="fontSize-20" v-if="item.order_type == 1">{{item.gift_score}}</text>
								<text class="fontSize-20" v-else>{{item.cart[0].price}}</text>
							</view>
							<view>x {{item.count}}</view>
						</view>
					</view>
				</template>
			</view>
			<u-empty v-if="list.length == 0"
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
					width="150px"
					height="150px"
					text="列表为空"
					textSize="18"
			>
			</u-empty>
			<view style="padding-bottom: 100rpx;">
				<u-loadmore v-if="loading" status="loading" />
				<u-loadmore v-if="isLastPage" status="nomore" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list1:[
					{name:'全部'},
					{name:'待支付'},
					{name:'待发货'},
					{name:'待收货'},
					{name:'已完成'}
				],
				chooseTabList:[
					{name:'商城订单'},
					{name:'积分订单'}
				],
				chooseTabIndex:0,
				status:0,
				page: 1,
				limit: 10,
				list: [],
				isLastPage: false,
				loading: false,
				goods_type:1,
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			this.getOrderList()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.getOrderList()
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.getOrderList();
			} else {
				this.isLastPage = true
			}
		},
		methods:{
			// 跳转到订单详情页
			goToOrderInfo(item){
				console.log(item)
				if(item.order_type ==2&&item.status ==1){
					this.$tools.navigateTo('/pages/mine/order-list/order-cart-info?order_no=' + item.order_no+'&code='+this.chooseTabIndex
					+'&order_status='+item.status+'&order_type='+item.order_type)
				}else{
					this.$tools.navigateTo('/pages/mine/order-list/order-info?order_no=' + item.order_no+'&code='+this.chooseTabIndex)
				}
			},
			// 订单状态切换
			handleTabs(e){
				console.log(e)
				this.status = e
				this.page = 1
				this.limit = 10
				this.list = []
				this.isLastPage = false
				this.getOrderList()
			},
			getOrderList(){
				let form = {
					page:this.page,
					limit:this.limit,
					status:this.status,
					goods_type:this.goods_type
				}
				this.$http.post(this.$api.order_list,form,{token:true}).then(res => {
					console.log(res)
					this.list = [...this.list, ...res.data]
				}).finally(() => {
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
				})
			},
			// 正常商品,积分商城切换
			handleChooseTab(index){
				this.chooseTabIndex = index
				console.log(index)
				if(index == 0){
					this.goods_type = 1
					this.page = 1
					this.limit = 10
					this.list = []
					this.isLastPage = false
					this.getOrderList()
				}else{
					this.goods_type = 2
					this.page = 1
					this.limit = 10
					this.list = []
					this.isLastPage = false
					this.getOrderList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-item-color{
		color: #967C5E;
	}
	.tabs-item{
		height: 100rpx;
	}
	.tabs-item-icon{
		width: 50rpx;
		height: 4rpx;
		background-color: #967C5E;
	}
	.chooseItem1{
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #F8F6F3 !important;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		border: 1rpx solid #967C5E;
	}
	.chooseItem{
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #E5DDD4;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
	}
</style>